<template>
	<view class="">
		<u-popup :show="show" @close="colosShow" :round="12" :closeable="true">
			<view class="popup_content">
				<uni-data-checkbox mode="tag" multiple v-model="partsList" :localdata="checkboxList" deleteIcon
					selectedColor="#3c9cff" selectedTextColor="#fff"></uni-data-checkbox>
				<view :class="[partsListText?'':'no-checked','title']" >{{partsListText ?partsListText :defTextType }}</view>
				<view class="line"></view>
				<view class="mar_top" style="padding: 0 100rpx;">
					<u-button type="primary" text="确定" hairline shape="circle" @click="popupConfirm"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			//清单
			checkboxList: {
				type: Array,
				default: () => {
					return []
				}
			},
			//回显
			echoList: {
				type: Array,
				default: () => {
					return []
				}
			},
			//展示什么文字
			textType:{
				type:Number,
				default:0
			}
		},
		mounted() {
			this.partsList = []
		},
		destroyed(){
			console.log('销毁');
			
		},
		watch:{
			echoList(val) {
				if(val) {
					console.log(val,'optionsBox接受的回显数据');
					this.partsList = val
				}
			},
			// partsList(val){
			// 	console.log(val,'partsList');
			// }
		},
		computed: {
			partsListText() {
				return this.partsList.toString()
			},
			defTextType(){
				return this.textType==1 ? '请在上面清单列表中,点击勾选所寄的物品' :this.textType==2?'请在上面列表中,点击勾选故障':''
			}
		},
		data() {
			return {
				partsList: this.echoList
			}
		},
		methods: {
			colosShow() {
				this.partsList = this.echoList
				this.$emit('update:show', false)
			},
			popupConfirm() {
				this.$emit('popupConfirm', this.partsList)
				setTimeout(()=>{
					this.partsList = this.echoList
				},300)
			}
		}
	}
</script>

<style scoped lang="scss">
	.popup_content {
		padding: 20px 20px 40px 20px;
		margin-top: 40rpx;
		.product {
			.item {
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #E6E6E6;
				text-align: center;
			}

			.option {
				border: 1px solid #E6E6E6;
				padding: 20rpx;
				margin: 0 20px;
				text-align: center;
				border-radius: 12rpx;
			}
		}

		.title {
			border: 1px solid #3c9cff;
			padding: 30rpx;
			letter-spacing: 2px;
			border-radius: 20rpx;
			margin-top: 10rpx;
			margin-bottom: 10px;
			color: #3c9cff;
			font-size: 12px;
			min-height: 80rpx;
			// line-height: 80rpx;
		}
		.no-checked{
			border: 1px solid #e2edff;
			color: #e5e5e5;
		}
	}

	.line{
		width: 100%;
		height: 1rpx;
		background: #f3f3f3;
		margin-top: 10rpx;
	}
</style>
